<template>
  <div>
    <main>
      <el-tabs
        v-model="activeName"
        type="border-card"
        @tab-click="tabChangeHandle"
      >
        <el-tab-pane label="课程提醒" name="first">
          <ul class="courseMsg">
            <div v-for="(item, index) in list" :key="index">
              <li
                v-if="item.state == '1'"
                @click="realMessageState(item)"
                class="color333"
              >
                <span class="icon">
                  <i class="iconfont icon-xiaoxi1"></i>
                  <span v-if="11"></span>
                </span>
                <span class="msg">{{ item.title }}</span>
                <span class="time">{{ item.createDate.substring(0, 10) }}</span>
              </li>

              <li v-if="item.state == '2'" class="">
                <span class="icon">
                  <i class="iconfont color999 icon-xiaoxi1"></i>
                </span>
                <span class="msg color999">{{ item.title }}</span>
                <span class="time color999">{{
                  item.createDate.substring(0, 10)
                }}</span>
              </li>
            </div>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="平台通知" name="second">
          <ul class="platformMsg">
            <div v-for="(item, index) in list" :key="index">
              <li
                v-if="item.state == '1'"
                @click="realMessageState(item)"
                class="color333"
              >
                <span class="icon">
                  <i class="iconfont icon-xiaoxi1"></i>
                  <span v-if="11"></span>
                </span>
                <span class="msg">{{ item.title }}</span>
                <span class="time">{{ item.createDate.substring(0, 10) }}</span>
              </li>

              <li v-if="item.state == '2'" class="">
                <span class="icon">
                  <i class="iconfont color999 icon-xiaoxi1"></i>
                </span>
                <span class="msg color999">{{ item.title }}</span>
                <span class="time color999">{{
                  item.createDate.substring(0, 10)
                }}</span>
              </li>
            </div>
          </ul>
        </el-tab-pane>
        <!-- 分页器 -->
        <el-pagination
          large
          background
          :page-size="rows"
          :current-page="page"
          layout="prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-tabs>
    </main>
  </div>
</template>

<script>
import { sendPost } from "@/utils/http";
import api from "@/config/api";

export default {
  data () {
    return {
      activeName: 'first',
      list: [],
      total: 0,//总题数
      page: 1,
      rows: 10,
      type: '1'
    }
  },
  created () {
    this.getMessageList()

    this.getMessageNum()
  },
  methods: {
      // 获取消息数量
    getMessageNum () {
      sendPost(api.getMessageNum, {}).then(res => {
        console.log(res);
        this.msgNum = res.data
        sessionStorage.setItem('msgNum',res.data)
      })
    },
    getMessageList () {
      let that = this
      sendPost(api.getMessageList, {
        page: that.page,
        rows: that.rows,
        type: that.type
      }).then(res => {
        console.log(res)
        that.list = res.data.list
        that.total = res.data.total

      })
    },
    tabChangeHandle (tab, e) {
      // if (this.type == '1') {
      //   this.type = '2'
      // } else {
      //   this.type = '1'
      // }
      console.log(tab.name);
      if(tab.name=='first'){
        this.type='1'
      }else{
        this.type='2'
      }
      this.page = 1;
      this.getMessageList()
      // console.log(tab, e)
    },
    handleCurrentChange (value) {
      // console.log(value)
      this.page = value
      this.getMessageList()
    },
    //修改消息状态
    realMessageState (message) {
      sendPost(api.realMessageState, {
        id: message.id
      }).then(res => {
        this.$msg({
          message: '已读',
          type: 'success'
        });
        this.getMessageList();
        this.getMessageNum()
        this.$router.go(0)
      })
    },
    // // 获取消息数量
    // getMessageNum () {
    //   sendPost(api.getMessageNum, {}).then(res => {
    //     console.log(res);
    //     // this.msgNum = res.data
    //     sessionStorage.setItem('msgNum', res.data)

    //   })
    // },
  }
}
</script>

<style lang="less" scoped>
main {
  padding: 1.25rem;
  box-sizing: border-box;
  /deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    border: none;
    border-top: 0.1875rem solid #ff5342;
    color: #ff5342;
  }
  /deep/.el-tabs--card > .el-tabs__header .el-tabs__nav {
    border-top: none;
    border-radius: 0;
  }
  /deep/.el-tabs__item.is-active {
    color: #ff5342;
  }
  /deep/.el-tabs--border-card
    > .el-tabs__header
    .el-tabs__item:not(.is-disabled):hover {
    color: #ff5342;
  }
  /deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item {
    border: 0.1875rem solid transparent;
  }
  ul {
    li:hover {
      background-color: #f7f7f7;
    }
    li {
      display: flex;
      height: 3.75rem;
      line-height: 3.75rem;
      padding: 0 0.625rem;
      box-sizing: border-box;

      cursor: pointer;
      .icon {
        flex: 1;
        position: relative;
        .iconfont {
          font-size: 1.125rem;
        }
        span {
          width: 0.4rem;
          height: 0.4rem;
          background: #ff5e4e;
          border-radius: 50%;
          position: absolute;
          left: 0.875rem;
          top: 1.3125rem;
        }
      }
      .msg {
        flex: 30;
        padding-left: 0.625rem;
        box-sizing: border-box;
        font-size: 1rem;
        font-weight: 400;
      }
      .time {
        flex: 4;
        font-size: 1rem;
        font-weight: 400;
      }
      .color333 {
        color: #333;
      }
      .color999 {
        color: #999;
      }
    }
  }
  .el-pagination {
    text-align: center;
  }
  /deep/.el-pagination button,
  .el-pagination span:not([class*="suffix"]) {
    display: inline-block;
    font-size: 0.8125rem;
    min-width: 2.21875rem;
    height: 2.5rem;
    line-height: 2.5rem;
    vertical-align: top;
    box-sizing: border-box;
  }
  /deep/.el-pager li {
    padding: 0 0.25rem;
    font-size: 0.9375rem;
    min-width: 2.21875rem;
    height: 2.5rem !important;
    width: 2.5rem;
    line-height: 2.5rem;
    box-sizing: border-box;
    text-align: center;
  }
  ::v-deep {
    .el-pagination.is-background .el-pager li:not(.disabled) {
      background-color: #fff; // 进行修改未选中背景和字体
      // color: #fff;
      border: 1px solid #c0c4cc;
    }
    .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #ff5e4e; // 进行修改选中项背景和字体
      color: #fff;
    }
  }
  .el-pagination {
    font-size: 1.25rem;
    margin: 0 20rem;
    position: absolute;
    bottom: 6.25rem;
    text-align: center;
  }
}
/deep/.el-tabs--border-card > .el-tabs__content {
  height: 60.625rem;
}
</style>
